<script setup>

import {reactive, ref} from "vue";
  //装爱好的值
  let hbs = ref([])
  //装用户的值
  let user = reactive({
    username:null,password:null,introduce:null,pro:null
  })
  //登录的方法
  function  login(){
    alert(hbs.value)
    alert(JSON.stringify(user))
  }
  //重置的方法
  function reset() {
    user.username=null
    user.password=null
    user.introduce=null
    user.pro=null
    //清空爱好的值
    hbs.value=[]
  }
</script>

<template>
  <div>
    姓名：<input type="text" placeholder="请输入你的姓名" v-model="user.username">
    <br>
    密码：<input type="password" placeholder="请输入你的密码" v-model="user.password">
    <br>
    爱好：
    <input type="checkbox" name="hbs" v-model="hbs" value="打篮球">
    <input type="checkbox" name="hbs" v-model="hbs" value="LOL">
    <input type="checkbox" name="hbs" v-model="hbs" value="CF">
    <input type="checkbox" name="hbs" v-model="hbs" value="打台球">
    <input type="checkbox" name="hbs" v-model="hbs" value="金铲铲">
    <br>
    简介：
    <textarea v-model="user.introduce"></textarea>
    <br>
    籍贯：
    <select v-model="user.pro">
      <option value="1">黑</option>
      <option value="2">吉</option>
      <option value="3">辽</option>
      <option value="4">京</option>
      <option value="5">津</option>
      <option value="6">冀</option>
    </select>
    <br>
    <button @click="login()">登录</button>
    <button @click="reset()">重置</button>
    <hr>
    显示爱好：{{hbs}}
    <hr>
    显示用户的信息：{{user}}

  </div>
</template>

<style scoped>

</style>